<template>
  <div @click="$router.push('/applylist')">
    <div class="apply_text" v-if="list.checkapprove_state">
      
      <div><img class="zizhipic" src="http://higuang365.com/public/images/common/icon/zizhi.png"/>{{ apply_type[list.apply_type] }}</div>
      <div class="apply_time">{{ list.apply_time }}</div>
      <div :class="apply_state[list.checkapprove_state].color">
        {{ apply_state[list.checkapprove_state].name }}
      </div>
      <!-- <div>{{value.approve_note}}</div> -->
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue";
import { useStore } from "vuex";
import { GetapplyList } from "@/api/user";
export default {
  setup() {
    const data = reactive({
      list: {},
      apply_state: {
        1: { name: "审批中", color: "yellow" },
        2: { name: "申请通过", color: "green" },
        3: { name: "驳回", color: "red" },
      },
      apply_type: { 1: "申请店铺", 2: "店铺资格认证" },
    });
    const store = useStore();
    const onLoad = async () => {
      const res = await GetapplyList({
        memberid: store.state.userInfo.F_UserId,
      });
      if (!res[0]) {
        return;
      }
      data.list = res[1][0]?res[1][0]:{};
    };
    onMounted(() => {
      onLoad();
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.apply_text {
  background: #fff;
  border-radius: 1rem;
  margin: 1rem;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  font-size: 1.3rem;
  line-height: 2.5rem;
  .zizhipic{
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 1rem;
    vertical-align: middle;
  }
  .apply_time {
    color: #aaa;
  }
}
.red {
  color: red;
}
.green {
  color: green;
}
.yellow {
  color: #ab8e00;
}
</style>